<template>
  <div class="content">
    <el-card>
      <div shadow="never" class="search-wrapper">
        <el-form ref="searchFormRef" :inline="true" :model="searchData">
          <el-form-item prop="dataName" label="数据名称">
            <el-input v-model="searchData.dataName" placeholder="请输入数据名称" clearable />
          </el-form-item>
          <!-- <el-form-item prop="name" label="用途">
          <el-input v-model="searchData.name" placeholder="请输入用途" clearable />
        </el-form-item> -->
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
            <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
            <el-button type="warning" :icon="Plus" @click="handleAdd">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="mt-4">
      <div v-loading="loading" shadow="never">
        <div class="table-wrapper">
          <el-table :data="tableData" max-height="64vh">
            <el-table-column prop="dataName" label="数据名称" align="center" />
            <el-table-column label="状态" align="center">
              <template #default="scope">
                <el-tag v-if="scope.row.isUse == 1" type="success">已启用</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="280px">
              <template #default="scope">
                <el-button
                  v-if="scope.row.isUse != 1"
                  type="primary"
                  text
                  bg
                  size="small"
                  @click="handleUse(scope.row)"
                >
                  启用
                </el-button>
                <el-button type="primary" text bg size="small" @click="handleView(scope.row)">预览</el-button>
                <el-button type="primary" text bg size="small" @click="handleExp(scope.row)">导出</el-button>
                <!-- <el-button type="primary" text bg size="small" @click="handleUpdate(scope.row)">修改</el-button> -->
                <el-button
                  v-if="scope.row.isUse != 1"
                  type="danger"
                  text
                  bg
                  size="small"
                  @click="handleDelete(scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="flex justify-end">
            <el-pagination
              v-model:current-page="paginationData.currentPage"
              background
              layout="total, prev, pager, next"
              :total="paginationData.total"
              :page-size="paginationData.pageSize"
              @current-change="getTableData"
              :small="true"
              class="flex justify-end mt-2"
            />
          </div>
        </div>
      </div>
    </el-card>
    <AddData v-model:visible="isShowAdd" :id="editId" @create="getTableData" />
    <Preview v-model:visible="isShowPreview" :id="editId" />
  </div>
</template>

<script setup>
import { myDataList, myDataUse, myDataExp, myDataDel } from '@/api/myData'
import AddData from './components/addData.vue'
import Preview from './components/preview.vue'
import { Search, Refresh, Plus, ArrowDown } from '@element-plus/icons-vue'
import { reactive } from 'vue-demi'
import { ElMessage, ElMessageBox } from 'element-plus'
const searchData = reactive({
  dataName: ''
})
const paginationData = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1
})
const searchFormRef = ref(null)
const loading = ref(false)
const isShowAdd = ref(false)
const isShowPreview = ref(false)
const editId = ref('')
const tableData = ref([])
onMounted(() => {
  getTableData()
})
const handleSearch = () => {
  paginationData.currentPage = 1
  getTableData()
}
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  if (paginationData.currentPage === 1) {
    getTableData()
  }
  paginationData.currentPage = 1
}
const handleAdd = () => {
  editId.value = ''
  isShowAdd.value = true
}
const handleUpdate = (row) => {}
const getTableData = () => {
  loading.value = true
  myDataList({ ...searchData }, paginationData.currentPage, paginationData.pageSize)
    .then((res) => {
      tableData.value = res.data.data
      paginationData.total = parseInt(res.data.total)
    })
    .finally(() => {
      loading.value = false
    })
}
const handleUse = (row) => {
  myDataUse(row._id).then((res) => {
    ElMessage.success('操作成功')
    getTableData()
  })
}
const handleView = (row) => {
  isShowPreview.value = true
  editId.value = row._id
}
const handleExp = (row) => {
  myDataExp(row._id).then((res) => {
    var blob = new Blob([res])
    var href = URL.createObjectURL(blob)
    var downloadElement = document.createElement('a')
    downloadElement.href = href
    downloadElement.download = `${row.dataName}.zip`
    document.body.appendChild(downloadElement)
    downloadElement.click()
    document.body.removeChild(downloadElement)
    URL.revokeObjectURL(href)
  })
}
const handleDelete = (row) => {
  ElMessageBox.confirm('确定删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    myDataDel(row._id).then((res) => {
      ElMessage.success('删除成功')
      getTableData()
    })
  })
}
</script>

<style lang="scss" scoped></style>
